---
title: Styling Overview | gluestack-ui
description: gluestack-ui has its own styling engine `@gluestack-style/react` which makes styling of components easy.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="ui/Home/Styling/Overview" />

# Styling Overview

All the components of [**`@gluestack-ui/themed`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed) by default are unstyled. Styling is provided by our styling engine [**`@gluestack-style/react`**](/style/docs/overview/introduction) by passing [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config). Config file exports an object which is passed inside the `GluestackUIProvider`(a Wrapper component that applies the theme to all the children).

```jsx
import { config } from '@gluestack-ui/config';
import { GluestackUIProvider } from '@gluestack-ui/themed';

function App({ children }) {
  return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>;
}
```

The imported config contains a theme object which contains all the configuration, the structure looks something like the following:

```json
{
  "aliases": {
    # Adding bg as alias of background Color
    "bg": "backgroundColor"
  },
  "tokens": {
    # All the tokens are defined here like colors, borderWidths, radii, breakpoints, mediaQueries ....
  },
  "globalStyle": {
    # All the global style is defined here
  },
  "components": {
    # All the components style is defined here
  },
  "themes": {
    # All the themes are defined here
  },
  "plugins":{
    # All the plugins are defined here
  }
}
```

The theme object has aliases, tokens, global style, components and themes.

- [aliases](/style/docs/configuration/theme-tokens): This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.

- [tokens](/style/docs/configuration/theme-tokens): This is where you define your design tokens. Tokens helps us to maintain consistent designs.

- [globalStyle](/style/docs/configuration/global-style): The styles written inside globalStyle are applied globally in the application.

- [components](/style/docs/configuration/customizing-components): This is where you can add component specific styling

- [themes](/style/docs/configuration/themes): Here you can create themes for your app with different values for a particular token for more flexibility and reusability of tokens.

- [plugins](/style/docs/plugins/introduction): gluestack-style provides a plugin system to extend the existing functionality of the styled function, making it ideal for adding support for new aliases, tokens, and more.
